﻿@using Eksponent.CropUp
@using Lu.Blog.Domain.Utils
@using umbraco.MacroEngines
@inherits Umbraco.Web.Mvc.UmbracoViewPage<Lu.Blog.Models.SliderViewModel>

@if (Model.Items.Any())
{
    <!-- SLIDER -->
    <div id="home-slider" class="lof-slidecontent">
					
        <div class="preload"><div></div></div>
					
        <!-- slider content --> 
        <div class="main-slider-content" >
            <ul class="sliders-wrap-inner">
                @foreach (var item in Model.Items)
                {
                    <li>
                        <img src="@CropUp.GetUrl(item.SummaryImageUrl, new ImageSizeArguments{CropAlias = "homeSlider"})" class="hidden-xs-320">
                        <div class="slider-description">
                            <h4>@item.SummaryTitle</h4>
                            <p>@Html.Raw(item.SummaryBody)
                                <a class="link" href="@item.Page.NiceUrl">Read more</a>
                            </p>
                        </div>
                    </li>
                }
            </ul>  	
        </div>
        <!-- ENDS slider content --> 
				           
        <!-- slider nav -->
        <div class="navigator-content">
            <div class="navigator-wrapper">
                <ul class="navigator-wrap-inner">
                    @foreach (var item in Model.Items)
                    {
                        <li><img src="@CropUp.GetUrl(item.SummaryImageUrl, new ImageSizeArguments{CropAlias = "homeSlider", Width = 188, Height = 73})"></li>
                    }
                </ul>
            </div>
            <div class="button-next">Next</div>
            <div  class="button-previous">Previous</div>
            <!-- REMOVED TILL FIXED <div class="button-control"><span>STOP</span></div> -->
        </div> 
        <!-- slider nav -->
					  
    </div>
    <!-- ENDS SLIDER -->
}